html {
  .theme-dark,.theme-light {
    .zyCommonWrapper {
      .zySidebarWrapper {
        width: 326px;
        padding-bottom: 48px;
        box-shadow: none;
        .zySidebar {
          .subItem {
            &:first-child{
              padding-top: 24px;
              height: 74px;
              &.open{
                height: auto;
              }
            }
            .content {
              line-height: 48px;
              margin: 0 16px;
              padding: 0 16px;
              .arrow{
                transform: rotate(90deg);
                font-size: 16px;
              }

              .con {
                font-size: 16px;
                font-weight: 400;
                width: 183px;
              }

              .iconLeft{
                font-size: 24px;
                width: 24px;
              }

              .arrow {
                float: right;
              }
            }

            .childMenu {
              padding: 0 16px;
              li {
                line-height: 48px;
                height: 48px;
                padding-left: 0;
                .thirdItem {
                  font-size: 16px;
                  font-weight: 400;
                  line-height: 48px;
                  height: 48px;
                }
                span{
                  padding-left: 53px;
                }

                &.active {
                  &:after {
                    display: none;
                    background: transparent;
                  }
                }
              }
            }

            &.active {
              .content {
                &.single{
                  background: rgba(131, 150, 181, 0.2);
                  border-radius: 8px;
                }
                .con {
                  font-size: 16px;
                  font-weight: 400;
                }

                i {
                  &.arrow {
                    font-size: 16px;
                  }

                }
              }
              .childMenu {

                li{
                  background: transparent;
                  //padding: 0 16px;
                  box-sizing: border-box;
                  span{
                    border-radius: 8px;
                    padding-left: 53px;
                  }
                  &.active{
                    span{
                      background: rgba(3, 91, 235, 1) url("~@/assets/images/theme/mActiveNav.png") left bottom no-repeat;
                      background-size: 55px auto;
                      border-radius: 8px;
                      font-weight: bold;
                      //transition: background-color .1s linear;
                    }
                  }
                }
              }
            }

            &.open {
              .content {
                border-radius: 8px;
                margin: 0 16px;
                padding: 0 16px;
                .arrow{
                  transform: rotate(270deg);
                }
              }
            }
          }
        }
        .shrinkBtn{
          height: 48px;
          line-height: 48px;
          background: transparent;
          border-top: 1px solid rgba(255,255,255,0.2);
          text-align: right;
          padding-right: 32px;
          border-radius: 0;
          position: relative;
          z-index: 111;
          i{
            font-size: 20px;
            display: inline-block;
          }
          .animate{
            transform: rotate(180deg);
          }
        }
        &.menuAnimate{
          width: 80px;
          .zyMinSidebar{
            left: 0;
            padding-top: 24px;
          }
        }
        .zyMinSidebar{
          text-align: center;
          left: -80px;
          width: 80px;
          .iconWrap{
            width: 48px;
            height: 48px;
            background: transparent;
            border-radius: 8px;
            margin: 0 auto;
            &.active{
              width: 48px;
              height: 48px;
              border-radius: 8px;
              margin: 0 auto;
              &:after{
                display: none;
              }
            }
          }
          .ivu-poptip-popper{
            border-radius: 8px;
            overflow: hidden;
            padding: 0;
            margin-top: 8px;
            *{
              background: transparent;
            }
            .ivu-poptip-content{
              border-radius: 8px;
              overflow: hidden;
            }
            .ivu-poptip-body{
              min-width: 240px;
              height: auto;
              border-radius: 8px;
              overflow: hidden;
              padding: 16px;
            }
            .ivu-poptip-arrow{
              display: none;
            }

          }
          .children-menu{

            li{
              min-width: 208px;
              height: 48px;
              border-radius: 8px;
              line-height: 48px;
              font-size: 16px;
              font-weight: 400;
              cursor: pointer;
              &.active{
                background: rgba(3, 91, 235, 1) url("~@/assets/images/theme/mActiveNav.png") left bottom no-repeat;
                background-size: 55px auto;
                font-weight: bold;
                //transition: background-color .1s linear;
              }
            }
          }
        }
      }
    }
  }
}

